<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盐师开学倒计时</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a5fb4 0%, #6d327c 100%);
            color: #fff;
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .container {
            width: 100%;
            max-width: 500px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            text-align: center;
        }
        
        .logo {
            width: 120px;
            height: 120px;
            margin: 0 auto 20px;
            background: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 50px;
            font-weight: bold;
            color: #1a5fb4;
        }
        
        h1 {
            font-size: 28px;
            margin-bottom: 10px;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        .subtitle {
            font-size: 16px;
            opacity: 0.9;
            margin-bottom: 30px;
        }
        
        .countdown {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 15px;
            padding: 20px;
            margin: 25px 0;
        }
        
        .countdown-title {
            font-size: 18px;
            margin-bottom: 15px;
        }
        
        .timer {
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        
        .time-unit {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 10px;
            padding: 12px;
            min-width: 70px;
        }
        
        .time-value {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .time-label {
            font-size: 14px;
            opacity: 0.8;
        }
        
        .task-container {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 15px;
            padding: 20px;
            margin-top: 20px;
            text-align: left;
        }
        
        .task-title {
            font-size: 20px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .task-title i {
            font-size: 24px;
        }
        
        .task-content {
            line-height: 1.6;
            background: rgba(0, 0, 0, 0.1);
            padding: 15px;
            border-radius: 10px;
            margin-top: 10px;
        }
        
        .day-indicator {
            display: inline-block;
            background: #ffce44;
            color: #333;
            padding: 4px 12px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 14px;
            margin-left: 10px;
        }
        
        .footer {
            margin-top: 30px;
            font-size: 14px;
            opacity: 0.7;
        }
        
        @media (max-width: 500px) {
            .container {
                padding: 20px;
            }
            
            .time-unit {
                min-width: 60px;
                padding: 10px;
            }
            
            .time-value {
                font-size: 28px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="logo">盐师</div>
        <h1>走出浪浪山 ~ 我准备好啦！</h1>
        <p class="subtitle">盐师2025级新生开学热身操</p>
        
        <div class="countdown">
            <div class="countdown-title">距离开学还有</div>
            <div class="timer">
                <div class="time-unit">
                    <div class="time-value" id="days">00</div>
                    <div class="time-label">天</div>
                </div>
                <div class="time-unit">
                    <div class="time-value" id="hours">00</div>
                    <div class="time-label">时</div>
                </div>
                <div class="time-unit">
                    <div class="time-value" id="minutes">00</div>
                    <div class="time-label">分</div>
                </div>
                <div class="time-unit">
                    <div class="time-value" id="seconds">00</div>
                    <div class="time-label">秒</div>
                </div>
            </div>
        </div>
        
        <div class="task-container">
            <div class="task-title">
                <i>📌</i> 今日任务 <span class="day-indicator" id="day-indicator">Day 1</span>
            </div>
            <div class="task-content" id="task-content">
                页面加载中，请稍候...
            </div>
        </div>
        
        <div class="footer">
            <p>盐师学工处 · 生命力网络育人名师工作室</p>
            <p>2025年9月</p>
        </div>
    </div>

    <script>
        // 开学日期设置 - 2025年9月13日
        const startDate = new Date('2025-09-13T00:00:00');
        // 活动开始日期 - 2025年9月1日
        const activityStartDate = new Date('2025-09-01T00:00:00');
        
        // 任务列表
        const tasks = {
            1: {
                title: "Day1 校园盲盒探索——'云游'盐师",
                content: "提前'云游'盐师，pick心动角落！通过盐师学工/学长分享'云游'校园，选一个【最想打卡的地标】截图并附上一句期待。"
            },
            2: {
                title: "Day2 声动盐师——校歌初体验",
                content: "学唱盐师校歌，录制演唱片段，发布打卡：'这是我的盐师初声'，让旋律成为你大学乐章的精彩序曲！"
            },
            3: {
                title: "Day3 铭记历史——观礼感悟",
                content: "收看九三阅兵盛典，分享一个最触动你的瞬间，附上一段感悟：'这一刻，我想说______。'让我们共同致敬英烈，砥砺前行！"
            },
            4: {
                title: "Day4 技能加载——暑假'高光时刻'征集展",
                content: "你的暑假有哪些精彩故事？是一次旅行、一项新技能、还是一份特别的感悟？不妨制作一份属于你的《暑假生活'高光时刻'》PPT，用心盘点假期收获，用创意展现个人风采。优秀作品将在'盐师学工'平台专题展示，并有机会入选新生开学典礼暖场视频！"
            },
            5: {
                title: "Day5 感恩行动——爱要表达",
                content: "把爱说出来，别等'下次'啦！做一件家务并向父母表达爱意，让这份突然的感恩，成为父母今日的快乐源泉！"
            },
            6: {
                title: "Day6 美味存档——家的味道",
                content: "把'家的味道'存进记忆行囊，跟父母学做一道家乡菜，用镜头记录烹饪瞬间，想家时，随时'云端回味'！"
            },
            7: {
                title: "Day7 暖心初见——第一声问候",
                content: "提前解锁盐师伙伴！写下你最想对新舍友或辅导员说的一句话，勇敢打出第一声招呼，传递你的善意与热情！"
            },
            8: {
                title: "Day8 未来信箱——时空对话",
                content: "初心不忘，未来可期！手写一封给四年后自己的信，写下对大学的期待、目标与梦想，为未来的自己留存一份初心与约定！"
            },
            9: {
                title: "Day9 独立第一步——行程规划",
                content: "这是你独立生活的开始！自行整理开学行囊，自主规划来校路线及事宜，晒出你的车票/行程计划图，大声宣告：'我的大学路，我自己走！'"
            },
            10: {
                title: "Day10 寻脉启新——我与盐师的第一份约定",
                content: "深入体会校风、校训及学风的精神内核，选择最打动你的一句话或一个词，用文字或声音记录你的理解，分享它为何与你共鸣，以及你在未来四年如何践行它。"
            },
            11: {
                title: "Day11 互助共享——盐师锦囊推荐",
                content: "好东西，就是要和未来同学一起分享！翻一翻'盐师学工'公众号的【锦囊】，选出你最认可的一条攻略分享给大家，并说明理由：'推荐这个，因为______。'"
            },
            12: {
                title: "Day12 温馨定格——晒出我的'最强后援团'",
                content: "出发前，和家人拍张全家福，发朋友圈带话题：#我的大学起点@盐师学工，仪式感拉满！自信出发！"
            },
            13: {
                title: "Day13 专属缓冲日——我的自选动作（9.14报道学生选做）",
                content: "盐师，我明天到！主动联系13日已报到的小伙伴，晒图分享获取的报到流程、宿舍环境等'一线情报'，这是属于你的额外准备时间，更是你提前连接盐师的独特优势！"
            }
        };

        // 更新倒计时函数
        function updateCountdown() {
            const now = new Date();
            const diff = startDate - now;
            
            if (diff <= 0) {
                document.getElementById('days').textContent = '00';
                document.getElementById('hours').textContent = '00';
                document.getElementById('minutes').textContent = '00';
                document.getElementById('seconds').textContent = '00';
                
                // 如果已经开学，显示相应信息
                if (diff < 0) {
                    document.getElementById('day-indicator').textContent = '已开学';
                    document.getElementById('task-content').innerHTML = '开学快乐！';
                }
                return;
            }
            
            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);
            
            document.getElementById('days').textContent = days.toString().padStart(2, '0');
            document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
            document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
            document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
            
            // 计算当前是第几天任务
            const dayDiff = Math.floor((now - activityStartDate) / (1000 * 60 * 60 * 24)) + 1;
            const currentDay = Math.min(Math.max(dayDiff, 1), 13);
            
            // 更新任务显示
            document.getElementById('day-indicator').textContent = `Day ${currentDay}`;
            document.getElementById('task-content').innerHTML = `
                <strong>${tasks[currentDay].title}</strong><br><br>
                ${tasks[currentDay].content}
            `;
        }

        // 初始更新
        updateCountdown();
        
        // 每秒更新一次
        setInterval(updateCountdown, 1000);
    </script>
</body>
</html>